<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.input.type" style="width: 100px">
            <el-option label="采购单号" value="purchase_no"></el-option>
          </el-select>
          <el-input v-model="form.input.value" placeholder="请输入" class="w-40"></el-input>
        </VGroup>
        <VGroup>
          <el-select v-model="form.skuInfo.type" class="w-28">
            <el-option label="sku" value="sku"></el-option>
            <el-option label="赛盒SKU" value="sai_he_sku"></el-option>
            <el-option label="自定义sku" value="custom_sku"></el-option>
          </el-select>
          <el-input v-model="form.skuInfo.value" placeholder="请输入" class="w-40"></el-input>
        </VGroup>
        <VSelect v-model="form.supplier_name" placeholder="供应商" type="supplierName" allow-create style="min-width: 200px" multiple
          collapse-tags clearable filterable />
        <!-- <VSelect v-model="form.settlement_type" placeholder="结算方式" :options="options.settlement_type" multiple
          collapse-tags filterable clearable style="min-width: 160px" /> -->
        <VCascader v-model="form.department_name" placeholder="部门" type="department" multiple collapse-tags
          filterable clearable style="min-width: 160px" />
        <VGroup>
          <div class="v-group-item">付款时间</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VExport auh="/purchase/finance/detail/export" mainKey="prd_id" name="payment-refund-detail" :tableRef="tableRef" task />
      </template>
    </VTable>
    <VLog ref="logRef" />
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'


import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'

const baseName = 'invoice'
const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 获取options
const options = ref({})
Promise.all([
  getOption({ type: baseName }).then(res => res.data),
  getOption({ type: 'payment' }).then(res => res.data),
  Promise.resolve({ test: [{ label: '没有数据', value: 1 }] })
]).then(res => {
  options.value = res.reduce((acc, cur) => (((acc = { ...acc, ...cur }), acc)), {})
})


// 列表配置
const tableOptions = reactive({
  showHeaderOverflow: false,
  formConfig: {
    data: {
      input: { type: 'purchase_no', value: '' },
      skuInfo: { type: 'sku', value: '' },
      dateRange: { type: 'process_time', value: [], range: true },
    }
  },
  columns: [
    { title: '付款时间', field: 'process_time', minWidth: 160 },
    { title: '公司主体', field: 'company_name', minWidth: 140, slots: {
      default: ({row}) => <VText value={row.company_name} line={2} />
    } },
    { title: '供应商', field: 'supplier_name', minWidth: 140, slots: {
      default: ({row}) => <VText value={row.supplier_name} line={2} />
    } },
    { title: '部门', field: 'department_name', minWidth: 120, slots: {
      default: ({row}) => <VText value={row.department_name} line={2} />
    } },
    { title: '采购单号', field: 'purchase_no', minWidth: 140 },
    { title: 'SKU', field: 'sku', minWidth: 170 },
    { title: '付款/退款单号', field: 'source_no', minWidth: 130 },
    { title: '收款账号/付款账号', field: 'account', minWidth: 140 },
    { title: '支付金额/退款金额', field: 'source_price', minWidth: 100 },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>
  